<template>
  <div>
    <!-- placeholder="请输入订单名称" @on-search="crmSearch"  -->
    <c-r-m-list-head title="记账板块" :crm-type="crmType" />
    <!-- v-empty="!crm.complete.index" xs-empty-icon="nopermission" xs-empty-text="暂无权限" -->
    <div class="crm-container">
      <c-r-m-table-head
        ref="crmTableHead"
        crm-type="accounting"
        type="accounting"
        :isSeas="true"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
      ></c-r-m-table-head>
      <!-- <flexbox v-if="selectionList.length > 0" class="selection-bar">
        <div class="selected—title">已选中<span class="selected—count">{{selectionList.length}}</span>项</div>
        <flexbox class="selection-items-box">
          <flexbox class="selection-item" @click.native="pickClick()">
            <img class="selection-item-icon" src="@/assets/img/selection_get.png" />
            <div class="selection-item-name">捡取</div>
          </flexbox>
        </flexbox>
      </flexbox>
      </flexbox> -->
      <el-table
        class="n-table--border"
        id="crm-table"
        v-loading="loading"
        :data="list"
        :height="tableHeight"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        :cell-style="cellStyle"
        @row-click="handleRowClick"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="60"
          :selectable="handleSelectable"
        >
        </el-table-column>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          show-overflow-tooltip
          :fixed="index == 0"
          :prop="item.prop"
          :label="item.label"
          width="160"
          :formatter="fieldFormatter"
        >
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="check_status_info"
          label="操作"
          :resizable="false"
          width="260"
          align="center"
          fixed="right"
        >
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
          <template slot-scope="scope">
          <!--  && !scope.row.accountancy_user_realname -->
            <div
              class="status_button"
              :style="getStatusStyle('1')"
              style="cursor: pointer;"
              v-if="allocation"
              @click="handleDivided(scope.row.contract_id, '分配会计')"
            >
              分配
            </div>
            <div
              class="status_button"
              :style="getStatusStyle('1')"
              style="cursor: pointer;"
              v-if="startservice && !scope.row.accounting_start_time"
              @click="handleDivided(scope.row.contract_id, '开始服务')"
            >
              开始服务
            </div>
            <div
              class="status_button"
              :style="getStatusStyle('1')"
              style="cursor: pointer;"
              v-if="mak"
              @click="handleDivided(scope.row.contract_id, '做账')"
            >
              做账
            </div>
            <div
              class="status_button"
              :style="getStatusStyle('2')"
              style="cursor: pointer;"
              v-if="makelist"
              @click="handleDivided(scope.row.contract_id, '做账记录')"
            >
              做账记录
            </div>
            <div
              class="status_button"
              :style="getStatusStyle('1')"
              style="cursor: pointer;"
              v-if="cost"
              @click="handleDivided(scope.row.contract_id, '工本费')"
            >
              工本费
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="check_status_info"
          label="状态"
          :resizable="false"
          width="90"
          align="center"
          fixed="right"
        >
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
          <template slot-scope="scope">
            <div
              class="status_button"
              :style="getStatusStyle(scope.row.check_status)"
            >
              {{ scope.row.state_info }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" width="56">
          <template slot="header" slot-scope="slot">
            <img src="@/assets/img/t_set.png" @click="handleTableSet" class="table-set" />
          </template>
        </el-table-column> -->
      </el-table>
      <div class="p-contianer">
        <span class="money-bar">
          月代理服务费总和：{{ moneyPageData.monthly_agency_price || "0.00" }} /
          总费用：
          {{ moneyPageData.all_monthly_agency_price || "0.00" }}
        </span>
        <el-pagination
          class="p-bar"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          layout="slot, total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crmType="rowType"
      :id="rowID"
      type="complete"
      @handle="handleHandle"
      class="d-view"
    >
    </c-r-m-all-detail>
    <fields-set
      :crmType="crmType"
      @set-success="setSave"
      :dialogVisible.sync="showFieldSet"
    ></fields-set>
    <teams-handle
      :crmType="crmType"
      :title="teamsTitle"
      :selectionList="selectionList"
      :orderList="orderList"
      :contractId="contractId"
      :dialogVisible.sync="teamsDialogShow"
      @handle="handleCallBack"
      @complete="getList"
    ></teams-handle>
    <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" /> -->
  </div>
</template>

<script>
import {
  accountPicking,
  accountingMakelist
} from "@/api/customermanagement/common";
import { adminIndexAuthList } from "@/api/common";
import CRMAllDetail from "@/views/customermanagement/components/CRMAllDetail";
import table from "../mixins/table";
import TeamsHandle from "@/views/customermanagement/components/selectAccounting/TeamsHandle";

export default {
  /** 客户管理 的 订单列表 */
  name: "completeIndex",
  components: {
    CRMAllDetail,
    TeamsHandle
  },
  mixins: [table],
  data() {
    return {
      crmType: "accounting",
      contractId: "",
      moneyData: null, //订单列表金额
      isSeas: true,
      teamsDialogShow: false,
      selectionList: [],
      orderList: [],
      teamsTitle: "",
      allocation: false,
      startservice: false,
      mak: false,
      makelist: false,
      cost: false
    };
  },
  created() {
    this.getAuth();
  },
  computed: {
    moneyPageData() {
      // 未勾选展示订单总金额信息
      if (this.selectionList.length == 0 && this.moneyData) {
        return this.moneyData;
      } else {
        let sumMoney = 0.0;
        let unReceivablesMoney = 0.0;
        for (let index = 0; index < this.selectionList.length; index++) {
          const element = this.selectionList[index];
          if (element.check_status == 2) {
            sumMoney += parseFloat(element.money);
            unReceivablesMoney += parseFloat(element.unMoney);
          }
        }
        return {
          sumMoney: sumMoney.toFixed(2),
          unReceivablesMoney: unReceivablesMoney.toFixed(2)
        };
      }
    }
  },
  mounted() {},
  methods: {
    handleSelectable(row, index) {
      if (
        row.accounting_id == "" ||
        row.accounting_id == null ||
        row.accounting_id == 0
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 获取权限
    getAuth() {
      return new Promise((resolve, reject) => {
        adminIndexAuthList()
          .then(response => {
            const data = response.data;
            this.allocation = data.crm.accounting
              ? data.crm.accounting.allocation
              : false;
            this.startservice = data.crm.accounting
              ? data.crm.accounting.startservice
              : false;
            this.mak = data.crm.accounting ? data.crm.accounting.make : false;
            this.makelist = data.crm.accounting
              ? data.crm.accounting.makelist
              : false;
            this.cost = data.crm.accounting ? data.crm.accounting.cost : false;
            resolve(response);
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    pickClick() {
      this.$confirm("确定要捡取该工单吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let ids = this.selectionList.map(item => {
            return item.contract_id;
          });
          accountPicking({
            contract_id: ids
          })
            .then(res => {
              this.$message.success(res.data);
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    handleDivided(id, type) {
      this.contractId = id.toString();
      this.teamsTitle = type;
      if (type != "做账记录") {
        this.teamsDialogShow = true;
      } else {
        accountingMakelist({
          contract_id: this.contractId
        })
          .then(res => {
            this.teamsDialogShow = true;
            this.orderList = res.data.list;
          })
          .catch(() => {});
      }
    },
    // 子组件 回调的 结果
    handleCallBack(data) {
      this.$emit("handle", {
        type: data.type
      });
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "customer_name" || column.property === "num" || column.property === "accounting_user_realname") {
        return {
          color: "#3E84E9",
          cursor: "pointer"
        };
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";

.money-bar {
  color: #99a9bf;
  line-height: 44px !important;
  position: absolute;
  left: 20px;
  top: 0;
}

/** 勾选操作 */
.selection-bar {
  font-size: 14px;
  height: 34px;
  color: #777;
  margin: 10px 16px;

  .selected—title {
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid $--table-border-color;

    .selected—count {
      color: $xr-color-primary;
    }
  }
}

.selection-items-box {
  .selection-item {
    width: auto;
    padding: 15px;

    .selection-item-icon {
      display: block;
      margin-right: 5px;
      width: 15px;
      height: 15px;
    }

    .selection-item-name {
      cursor: pointer;
      color: #777;
    }

    .selection-item-name:hover {
      color: $xr-color-primary;
    }
  }
}
</style>
